<template>
  <el-row class="subtitle-row">
    <el-col :span="4" class="subtitle" id="subsafety"><label>Safety-安全</label></el-col>
    <el-col :span="1" ><label></label></el-col>
    <el-col :span="4" class="subtitle" id="subquality"><label>Quality-质量</label></el-col>
    <el-col :span="1" ><label></label></el-col>
    <el-col :span="4" class="subtitle" id="subdelivery"><label>Delivery-交付</label></el-col>
    <el-col :span="1" ><label></label></el-col>
    <el-col :span="4" class="subtitle" id="subcost"><label>Cost-成本</label></el-col>
    <el-col :span="1" ><label></label></el-col>
    <el-col :span="4" class="subtitle" id="subweekly"><label>Weekly Status-每周状态</label></el-col>
  </el-row>
  

  <div class="kpi-data">
    
  </div>
      
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>

  .subtitle-row{
    width: 100%;
    height: 3.5%;
  }
  
  .subtitle{
    //float: left;
    //width: 19.9%;
    
    font-size: 0.9vw;
    font-weight: bold;
    display: flex;
    align-items: center;      //垂直居中
    justify-content: center;  //水平居中
    border-right: 0.125vw solid #000000;
  }

  #subsafety{
    color: #FF0000; 
  }

  #subquality{
    color: #00B050;
  }

  #subdelivery{
    color: #FFC000;
  }
  #subcost{
    color: #0070C0;
  }
  #subweekly{
    border-right:none;
  }


</style>